<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>序列帧动画</title>
		<style type="text/css">
			div{
				width: 180px;
				height: 300px;
				background-repeat: no-repeat;
				background-position: 0 center;
				background-image: url(img/girl.png);
				animation-iteration-count: infinite;
				
				animation-name: up;
				animation-duration: 0.1s;
				animation-timing-function: steps(7);
			}
			div:hover{
				
			}
			@keyframes up{
				from{
					background-position-x: -1260px;
				}
				to{
					background-position-x: 0px;
				}
			}
			
		</style>
	</head>
	<body>
		<!--Just do it！-->
		<div>
			
		</div>
	</body>
</html>
